{% if sidebarData == '' %}
  {% set _leftWidth = '' %}
  {% set _rightWidth = 'col-md-12' %}
{% endif %}

{% extends _globals.config.layout %}

{% block style %}
  <link rel="stylesheet" href="/assets/libs/highlight/styles/{{ _globals.params.codeStyle }}.css">
  {% if _globals.config.pageCss is iterable %}
    {% for item in _globals.config.pageCss %} <link rel="stylesheet" href="{{ item }}"> {% endfor %}
  {% else %}
  <link rel="stylesheet" href="{{ _globals.config.pageCss }}">
  {% endif %}
{% endblock %}

{% block bottomScript %}
  <script src="/assets/libs/highlight/highlight.pack.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
  {% if _globals.config.pageJs is iterable %}
    {% for item in _globals.config.pageJs %} <script src="{{ item }}"></script> {% endfor %}
  {% else %}
  <script src="{{ _globals.config.pageJs }}"></script>
  {% endif %}
{% endblock %}

{% block pageScript %}
    {% if _globals.config.pageData is iterable %}
      GVar.pageData = {{ _globals.config.pageData|json_encode|raw }};
    {% else %}
      GVar.pageData = {};
    {% endif %}
    GVar.pageData.makeTOC = {{ _globals.config.makeTOC ? 1 : 0 }};
    GVar.pageData.pagePath = '{{ pagePath }}';
    GVar.pageData.filename = '{{ filename }}';
{% endblock %}

{% block bodyHeader %}
  {% if projectName is defined and projectName %}
    <div class="container">
      <h1>《{{ projectName }}》</h1>
      <p>文档描述 文档描述 </p>
    </div>
  {% endif %}

{% endblock %}

{% block body %}
  {# operate btn #}
  {% if _globals.user.isLogin() %}
    <div class="pull-right">
      <a class="btn btn-success btn-xs" href="{{ path_for('mder-page', {'action' : 'add'}) }}?page={{ pagePath }}">
          <span class="glyphicon glyphicon-plus"></span>
          {{ _globals.lang.tl('pageAdd') }}
      </a>
      <a class="btn btn-info btn-xs" href="{{ path_for('mder-page', {'action' : 'edit'}) }}?page={{ pagePath }}">
          <span class="glyphicon glyphicon-pencil"></span>
          {{ _globals.lang.tl('pageEdit') }}
      </a>
      <a class="btn btn-danger btn-xs" href="{{ path_for('mder-page',{'action':'del'}) }}" data-page="{{ pagePath }}">
          <span class="glyphicon glyphicon-remove"></span>
          {{ _globals.lang.tl('pageDel') }}
      </a>
    </div>
  {% endif %}


  <div class="panel panel-default">
    <div class="panel-body article-box">

      <h1 class="article-title">{{ attrs.title }}</h1>

      {% if _globals.config.showInfo %}
      <div class="well well-sm article-info">
          {% if attrs.tags %} {{ _globals.lang.tl('tags') }} : {% endif %}
          {% for tag in attrs.tags %}
              <span class="label label-primary">{{ tag }}</span>
          {% endfor %}

          {{ _globals.lang.tl('author') }} : <span class="label label-success">{{ attrs.author|default('Unknown') }}</span>

          {{ _globals.lang.tl('publishTime') }} :
          <span class="label label-info">{{ attrs.publishTime ? attrs.publishTime|date('Y-m-d') : 'Unknown' }}</span>

          {% if attrs.updateTime %}
              {{ _globals.lang.tl('updateTime') }} : <span class="label label-success">{{ attrs.updateTime|date('Y-m-d') }}</span>
          {% endif %}
      </div>
      {% endif %}

      <div class="article-content"> {{ content|raw }} </div>

    </div>
  </div>

  <nav class="article-nav">
    <ul class="pager">
      {% if attrs.prevPage is iterable %}
        <li>
            <a href="{{ attrs.prevPage.url }}">
                <span aria-hidden="true">&larr;</span> {{ attrs.prevPage.title }}
            </a>
        </li>
      {% elseif attrs.prevPage != false %}
          <li class="disabled"><a href="#"><span aria-hidden="true">&larr;</span> {{ _globals.lang.tl('noPage') }}</a></li>
      {% endif %}

      {% if attrs.nextPage is iterable %}
        <li>
            <a href="{{ attrs.nextPage.url }}">
                {{ attrs.nextPage.title }} <span aria-hidden="true">&rarr;</span>
            </a>
        </li>
      {% elseif attrs.nextPage != false %}
          <li class="disabled"><a href="#">{{ _globals.lang.tl('noPage') }} <span aria-hidden="true">&rarr;</span></a></li>
      {% endif %}
    </ul>
  </nav>

  {% if _globals.config.makeTOC %}
    <!-- content-toc -->
    <div id="content-toc-box" class="content-toc-box hidden-print hidden-xs hidden-sm" style="display: none">
      <small class="pull-right"><i class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></i></small>
      <div id="content-toc">
        <b> 文档结构</b>
        <div id="content-toc-list"></div>
      </div>
    </div>
  {% endif %}

  <div id="page-control">
    <a href="javascript:void(0);" class="btn btn-default btn-sm catelog-control-btn"><i class="glyphicon glyphicon-transfer" aria-hidden="true"></i></a>
    <a href="javascript:void(0);" class="btn btn-default btn-sm content-control-btn"><i class="glyphicon glyphicon-cog" aria-hidden="true"></i></a>
    <div class="content-control-tool" >
      Font Size:
      <div class="btn-group">
        <button type="button" class="btn btn-default btn-xs decrease-font"><i class="glyphicon glyphicon-minus" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-success btn-xs enlarge-font"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i></button>
      </div>
      <br>
      Content Theme:
      <div>
        <a href="javascript:void(0);"><span class="label label-default">Dark</span></a>
        <a href="javascript:void(0);"><span class="label label-warning">Solarized</span></a>
      </div>
    </div>
  </div>

{% endblock %}

{% block sidebar %}
{% include "mder/page/_catalog.twig" %}
{% endblock %}